<style>
body {
    background: #e3ebf8;
}

.container {
    width: calc(100vw - 200px);
    margin: 0 100px;

}
</style>
<template>
    <div>
        <HomeTop style="position: sticky;top: 0; z-index: 99;" />
        <div class="container">
            <userInfoTop :userInfo="userInfo"></userInfoTop>
            <userInfoMid></userInfoMid>
        </div>
    </div>
</template>
<script>
import userInfoTop from './components/user-info-top.vue';
import userInfoMid from './components/user-info-mid.vue';
import HomeTop from '@/components/HomeTop.vue';
import request from '@/utils/request';
export default {
    components: {
        userInfoTop,
        userInfoMid,
        HomeTop
    },
    data() {
        return {
            userInfo: {
                nickname: "红豆面包",
                avatar: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1qczlT.img?w=768&h=723&m=6&x=366&y=344&s=383&d=383",
                allView: 100,
                article: 100,
                fensNum: 100,
                ipAddress: "北京市",
                signature: "我是一个测试用户"
            }
        }
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            let userId = this.$route.params.userId;
            request.get(`/sys_users/${userId}`)
                .then(res => {
                    this.userInfo = res.data;
                })
        }
    }
}
</script>